<template>
  <div class="box">
    <van-nav-bar
      title="新增工作日志"
      left-text="返回"
      left-arrow
      fixed
      @click-left="$router.push('/crm/project')"
    >
    </van-nav-bar>
    <el-row>
      <el-form ref="form" :model="form" :rules="rules" label-width="0px" style="margin: 60px 10px 10px 10px">
        <el-col :span="24">
          <el-form-item prop="needDept">
            <el-select
              v-model="form.needDept"
              filterable
              placeholder="请选择科室"
              style="width: 100%"
            >
              <el-option
                v-for="dict in dict.type.crm_project_dept"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="otherDept" v-if="form.needDept === '8'">
            <el-input
              v-model="form.otherDept"
              placeholder="请输入科室名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="customerId">
            <el-select
              class="selectBox"
              v-model="form.customerId"
              filterable
              placeholder="请选择客户"
              style="width: 100%"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in customerList"
                :key="item.customerId"
                :label="item.customerName"
                :value="item.customerId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="workLog">
            <editor v-model="form.workLog" :min-height="500" />
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item prop="workLog">
            <el-button type="primary" round style="width: 100%; height: 50px;" @click="submitForm">提交</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { addWork, listWork } from "@/api/crm/work";
import { getCustomerList } from "@/api/crm/customer";
import { Toast } from 'vant';

export default {
  name: "addWorklog",
  dicts: ["crm_project_dept"],
  data() {
    return {
      rules: {
        needDept: [
          { required: true, message: "请选择科室", trigger: "change" },
        ],
        otherDept: [
          { required: true, message: "科室信息不能为空", trigger: "blur" },
        ],
        customerId: [
          { required: true, message: "请选择客户", trigger: "change" },
        ],
        workLog: [
          { required: true, message: "请填写工作日志", trigger: "blur" },
        ],
      },
      visible: false,
      form: {},
      customerList: [],
    };
  },
  created(){
    this.getCustomerList();
    this.form.projectId = this.$router.query.projectId
  },
  methods: {
    getCustomerList() {
      getCustomerList().then((res) => {
        this.customerList = res.data;
      });
    },
    // 取消按钮
    cancel() {
      this.visible = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        workId: null,
        needDept: null,
        otherDept: null,
        customerId: null,
        workLog: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.form.projectId = this.$route.query.projectId
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addWork(this.form).then((response) => {
            Toast("新增成功");
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.box {
    /* margin: 10px; */
}

::v-deep .selectBox .el-select-dropdown {
  width: 95% !important;
}
</style>